<!DOCTYPE>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" type="text/css" href="css/common.css" />
<link rel="stylesheet" type="text/css" href="css/list.css" />
<script src="js/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script>
<title>通讯录</title>
</head>
<body>
<div class="searchbox">
  <div class="search"><input type="text" name="" id="" value="" /><span></span></div>
</div>
<div class="address">
	<div class="item">
		<div class="info">
			<div class="headimg" style="background: url(images/head.jpg) no-repeat center;background-size: cover;"></div>
			<div class="username">张某某</div>
		</div>
		<div class="tel"></div>
	</div>
	<div class="item">
		<div class="info">
			<div class="headimg" style="background: url(images/head.jpg) no-repeat center;background-size: cover;"></div>
			<div class="username">王某某</div>
		</div>
		<div class="tel"></div>
	</div>
	<div class="item">
		<div class="info">
			<div class="headimg" style="background: url(images/head.jpg) no-repeat center;background-size: cover;"></div>
			<div class="username">董某某</div>
		</div>
		<div class="tel"></div>
	</div>
	<div class="item">
		<div class="info">
			<div class="headimg" style="background: url(images/head.jpg) no-repeat center;background-size: cover;"></div>
			<div class="username">李某某</div>
		</div>
		<div class="tel"></div>
	</div>
</div>
<div class="cover">
	<div class="telbox">
		<p>姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名：张某某   </p>   
		<p>性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别：男</p>
		<p>单位职务：太原市XXX工作人员</p>
		<p>电&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;话：15803515555<a href="tel:15803515555"></a></p>
	</div>
	<div class="colse"></div>
</div>
</body>
</html>
<script type="text/javascript">
$('.address>.item>.tel').click(function(){
	$('.cover').fadeIn(200);
});
$('.cover>.colse').click(function(){
	$('.cover').fadeOut(200);
});
</script>